import React, { use } from 'react';
import Login from './pages/Login/myLogin';
import Index from './layout/Index'
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom'
import User from './pages/user/User'
import menus from './routers'
const App = () => {
    // 递归生成路由路径
    const routetMap = ((menus) => {
        return menus.map(item => {
            if (item.children) {
                return routetMap(item.children)
            } else {
                return <Route path={item.key} element={item.element} key={item.key}></Route>
            }
        })
    })
    return <>
        {/* 路由模式定义，Hash 模式 */}
        <HashRouter>
            {/* Routes 配置路由列表 */}
            <Routes>
                {/* 每一项路由的配置 */}
                {/* 嵌套路由，目的是 将子路由配置在父路由里面，变化的是父级页面的部分内容 */}
                <Route path='/' element={<Index />}> {/* 默认路由一进来就是首页即父级页面 */}
                    {/* <Route path='user/list' element={<User />}></Route> */}
                    {routetMap(menus)}
                </Route>
                <Route path='login' element={<Login />}></Route>
            </Routes>
        </HashRouter>
    </>
}
export default App;